<template>
	<view class="container" style="position: absolute;">
		<!-- 底部返回按钮 -->
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">宠物详情</block>
		</cu-custom>
		<!-- 宠物领养详情 -->
		<view style="">
			<image :src="petImageUrl" style="width: 100%;height: 350rpx;"></image>
			<view class="margin-0 text-content" style="text-align: center;">
				<text class="text-lg">{{adoptinPetForm.petAdoptionTitle}}</text>
			</view>
			<view class="margin">
				<uni-row style="font-size: 20rpx;">
					<uni-col :span="6">
						<uni-icons type="location-filled" color="#777" />
						<text style="color: cadetblue">
							{{petCity}}
						</text>
					</uni-col>
					<uni-col :span="6">
						<text>浏览量：{{petRead}}</text>
					</uni-col>
					<uni-col :span="12">
						更新时间：{{updateTime}}
					</uni-col>
				</uni-row>
			</view>
			<view class="margin petbox">
				<view class="margin-lg">
					<text class="padding">昵称：{{petNick}}</text>
					<text class="padding">性别：{{petSex}}</text>
					<text class="padding">年龄：{{petAge}}</text>
				</view>
				<view class="margin-lg">
					<uni-tag class="margin-xs" v-for="(tag,index) in tagList" :key="index" :text="tag.tabName" :type="tag.tabType" size="mini"></uni-tag>
					<!-- <uni-tag class="margin-xs" text="标签" type="success" size="mini"></uni-tag> -->
				</view>
			</view>
			
			<!-- 宠物照片 -->
			<view class="margin">
				<view style="border-left: 3px solid #0081ff;color: #0081ff;">
					<text class="margin">宠物照片</text>
				</view>
				<view class="margin">
					<uni-grid :column="3" :highlight="true" :show-border="false">
						<uni-grid-item v-for="(item, index) in 3" :index="index" :key="index">
							<view class="margin-xs" style="background-color: #0081ff;width: 200rpx;height: 200rpx;">
								<image mode="scaleToFill" style="height: 200rpx;width: 200rpx;" src="https://img1.baidu.com/it/u=3233896545,721525246&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067"/>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			
			<!-- TA的故事 -->
			<view class="margin">
				<view style="border-left: 3px solid #0081ff;">
					<text class="padding" style="font-size: 30rpx;color: #0081ff;">TA的故事</text>
				</view>
				<view class="petStory">
					<view class="margin">
						{{petStory}}
					</view>
				</view>
			</view>
			<!-- 领养条件 -->
			<view class="margin">
				<view style="border-left: 3px solid #0081ff;">
					<text class="padding" style="font-size: 30rpx;color: #0081ff;">领养条件</text>
				</view>
				<view class="margin-top-xs">
					<view class="margin-left-lg margin-top-sm" v-for="(item,index) in conditionList" :key="index">
						<uni-icons type="checkmarkempty" size="15"></uni-icons>
						<text class="margin-lg" style="letter-spacing:5rpx">{{item.condition}}</text>
					</view>
					<!-- <view class="margin-left-lg margin-top-sm">
						<uni-icons type="checkmarkempty" size="15"></uni-icons>
						<text class="margin-lg" style="letter-spacing:5rpx">工作稳定</text>
					</view> -->
				</view>
			</view>
			<!-- 送养人信息 -->
			<view class="margin">
				<view style="border-left: 3px solid #0081ff;">
					<text class="padding" style="font-size: 30rpx;color: #0081ff;">送养人信息</text>
				</view>
				<view class="adopterinfo margin-top">
					<uni-row :gutter="5">
						<uni-col :span="6">
							<view style="height: 190rpx;width: 190rpx;text-align: center;border-radius: 50%;" class="padding">
								<image :src="adoptionUserIamgurl" style="height: 120rpx;border-radius: 50%;width: 120rpx;"></image>
							</view>
						</uni-col>
						<uni-col :span="18">
							<view class="padding-xs" style="margin-top: 3%">
								<text>{{adoptionUserName}}</text>
								<uni-tag class="margin-xs" :inverted="true" text="未实名认证" type="warning" size="mini"></uni-tag>
							</view>
							<view style="height: 50rpx;"></view>
							<!-- <view class="padding-xs online">
								<uni-icons type="chatbubble-filled" style="color: #fff;" size="10"></uni-icons>
								在线咨询
							</view> -->
							<view class="padding-xs">
								<uni-row :gutter="5">
									<uni-col :span="6">
										<view @click="contactWay('Phone')">
											<uni-icons type="phone-filled" style="color: #0081ff;" size="20"></uni-icons>
											<text>手机</text>
										</view>
									</uni-col>
									<uni-col :span="6">
										<view @click="contactWay('Wechat')">
											<uni-icons type="weixin" style="color: #00aa00;" size="20"></uni-icons>
											<text>微信</text>
										</view>
									</uni-col>
									<uni-col :span="6">
										<view @click="contactWay('QQ')">
											<uni-icons type="qq" style="color: #aa0000;" size="20"></uni-icons>
											<text>QQ</text>
										</view>
									</uni-col>
									<uni-col :span="6">
										<view @click="contactWay('Email')">
											<uni-icons type="email-filled" style="color: #42c8c8;" size="20"></uni-icons>
											<text>邮箱</text>
										</view>
									</uni-col>
								</uni-row>
							</view>
						</uni-col>
					</uni-row>
					<!-- 弹出层 -->
					<uni-popup ref="popup" background-color="#fff">
						<view class="popup-content" style="height: 120rpx;">
							<uni-row>
								<uni-col :span="6">
									<view style="height: 50rpx;"></view>
								</uni-col>
								<uni-col :span="12">
									<view class="margin" style="text-align: center;font-size: 30rpx;">
										{{contact}}
									</view>
								</uni-col>
								<uni-col :span="3">
									<view class="margin">
										<uni-icons custom-prefix="iconfont" size="20" type="icon-cope" color="#c0c4cc" @click="copyText"/>
									</view>						
								</uni-col>
								<uni-col :span="3">
									<view class="margin" @click="OKorCancel">
										<uni-icons :type="iconType" :style="{'color': iconColor}" size="25"></uni-icons>
									</view>						
								</uni-col>
							</uni-row>
						</view>
					</uni-popup>
					<!-- 弹出确认按钮 -->
					<uni-popup ref="alertDialog" type="dialog">
						<uni-popup-dialog 
							type="success" 
							cancelText="取消" 
							confirmText="确定" 
							title="提示" 
							:content="TipText" 
							@confirm="dialogConfirm"
							></uni-popup-dialog>
					</uni-popup>
				</view>
			</view>
			<view style="height: 100rpx;"><!-- 占位 --></view>
		</view>
		<!-- 底部悬浮按钮 -->
		<view class="bottomNav">
			<uni-row :gutter="5" class="margin">
				<uni-col :span="6" style="text-align: center;">
					<!-- <uni-icons type="phone" size="30"></uni-icons> -->
					<view style="height: 50rpx;"></view>
				</uni-col>
				<uni-col :span="12" style="text-align: center;">
					<view>
						<button class="btn">申请领养</button>
					</view>
				</uni-col>
				<uni-col :span="6" style="text-align: center;">
					<view style="height: 50rpx;"></view>
					<!-- <uni-icons type="weixin" size="30"></uni-icons> -->
				</uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	
	const contactInfor = {
	  PHONE: 'Phone',
	  WECHAT: 'Wechat',
	  QQ: 'QQ',
	  EMAIL:'Email'
	};
	
	export default {
		data() {
			return {
				//送养宠物详情
				adoptinPetForm:{
					petImageUrl:'',
					petAdoptionTitle:'捡来的流浪狗，脾气太凶，求领养',
				},
				//宠物图片
				petImageUrl:'https://pic.gomaji.com/uploads/stores/101/74101/90237/9881036_l.jpg',
				//宠物所有的城市
				petCity:'苏州',
				//浏览量
				petRead:70,
				//更新时间
				updateTime:'2024-07-24 20:00:00',
				//宠物昵称
				petNick:'奶黄包',
				//宠物性别
				petSex:'男孩',
				//宠物年龄
				petAge:'4-7月',
				//宠物健康状态列表
				tagList:[
					{
						tabName:'已疫苗',
						tabType:'success',
					},
					{
						tabName:'已清洁',
						tabType:'success',
					},
				],
				//宠物故事
				petStory:'请确保传递的参数值是合法的URL编码，如果参数包含特殊字符，应使用encodeURIComponent进行编码。在目标页面中，使用decodeURIComponent解码参数。',
				//领养条件
				conditionList:[
					{
						condition:'工作稳定'
					},
					{
						condition:'爱好小动物'
					},
				],
				//送养人头像
				adoptionUserIamgurl:'https://n.sinaimg.cn/front/798/w399h399/20181128/z6Ea-hpevhcm1517656.jpg',
				//送养人称呼
				adoptionUserName:'老黄学长',
				iconType:'',
				contact:'',
				iconColor:'',
				TipText:'',
				contactType:'',
			}
		},
		onLoad:function(options) {
			// console.log(options.id)
		},
		methods: {
			//联系方式类型
			contactWay(type){
				//
				this.$refs.popup.open("bottom");
				this.contactType = type;
				switch(type){
					case "Phone":
						this.iconType = "phone-filled";
						this.contact = "17315597762";
						this .iconColor = "#0081ff";
						this.TipText = "确定要拨打该电话吗?";
					break;
					case "Wechat":
						this.iconType = "weixin";
						this.contact = "17315597762";
						this .iconColor = "#00aa00";
						this.TipText = "确定要联系该微信吗?";
					break;
					case "QQ":
						this.iconType = "qq";
						this.contact = "17315597762";
						this .iconColor = "#aa0000";
						this.TipText = "确定义要联系该QQ吗?";
						
					break;
					case "Email":
						this.iconType = "email-filled";
						this.contact = "17315597762";
						this .iconColor = "#42c8c8";
						this.TipText = "确定要向该邮箱发送邮件吗?";
						this.openEmail("huang_zechang@126.com");
					break;
				}
			},
			OKorCancel(){
				this.$refs.alertDialog.open();
			},
			dialogConfirm(){
				switch(this.contactType){
					case "Phone":
						if(uni.getSystemInfoSync().platform === 'android' || uni.getSystemInfoSync().platform === 'ios'){
							uni.makePhoneCall({
							  phoneNumber: "17315597762", // 电话号码
							  success: function () {
								console.log('拨号成功');
							  },
							  fail: function () {
								console.log('拨号失败');
							  }
							});
						}
						else{
							console.log('该功能仅支持在移动设备上使用');
						}
					break;
					case "Wechat":
					break;
					case "QQ":
					break;
					case "Email":
					break;
				}
			},
			//复制联系方式
			copyText() {
			  uni.setClipboardData({
				data: '需要复制的内容',
				success: function () {
				  uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 1000
				  });
				}
			  });
			},
			openEmail(email) {
			  // 判断平台
			  let platform = uni.getSystemInfoSync().platform;
			  if (platform === 'android') {
			    // 安卓平台
			    uni.makePhoneCall({
			      phoneNumber: 'mailto:' + email
			    });
			  } else if (platform === 'ios') {
			    // iOS平台
			    uni.makePhoneCall({
			      phoneNumber: 'mailto:' + email
			    });
			  } else {
			    // 其他平台
			    uni.showToast({
			      title: '平台不支持',
			      icon: 'none'
			    });
			  }
			}
		}
	}
</script>

<style>
.online{
	border-radius: 25px;
	width: 160rpx;
	background-color: #55aaff;
	height: 30rpx;
	text-align: center;
	line-height: 10rpx;
	color: #fff;
	font-size: 20rpx;
}
.adopterinfo {
	height: 200rpx;
	border: 1px solid #b9b9b9; 
	border-radius: 20rpx;
	box-shadow: 1px 1px 5px 5px rgba(102, 102, 102, 0.2);
}
.petbox{
	font-size: 20rpx;
	text-align: center;
	height: 200rpx;
	border:2px solid #0081ff;
	/* 2979ff */
}
.petStory{
	/* border-left: 3px solid #0081ff; */
	/* color: #ffaa00; */
	
	border:1px solid #0081ff;
	margin-top: 10rpx;
	border-radius: 20rpx;
	font-size: 25rpx;
	/* height: 500rpx; */
}
.bottomNav{
	 position: fixed;
	  bottom: 0;
	  left: 0;
	  width: 100%;
	  height: 100rpx;
	  /* border-top: 1px solid #b9b9b9; */
	  /* box-shadow: 25px 10px 25px rgba(102, 102, 102, 0.8); */
	  /* background-color: #e6e6e6; */
}
.btn{
	width: 200rpx;
	height: 50rpx;
	width: 100%;
	display: flex;
	margin-top: 0;
	line-height: 50rpx;
	justify-content: center;
	border-radius: 25px;
	/* border: 3rpx solid #ffaa00; */
	font-size: 28rpx;
	background-color: #0081ff;
	color: #ffffff;
}

</style>
